<template>
    <div class="admin-page">
        <div class="admin-content">
            <p style="text-align: right;">
                <Button @click="add" style="font-size: 18px">新增</Button>
            </p>
            <p class="admin-header"><span class="name">名称</span><span class="status">操作</span></p>
            <div>
                <!--<Collapse v-model="value1">-->
                <!--<Panel name="1">-->
                <!--乔布斯-->
                <p class="admin-item" slot="content" v-for="item in algorithmList">
                    <span class="name">{{item.name}}</span>
                    <span class="status">
                                <i-switch v-model="item.function==1" @on-change="onOffSwitch(item)"></i-switch>
                        <!--<i-switch @on-change="onOffSwitch(item)" :value="item.function==1"></i-switch>-->
                                <Button @click="modify(item)">修改</Button>
                                <Button @click="del(item.id)">删除</Button>
                                <Button>测试</Button>
                            </span>
                </p>
                <!--</Panel>-->
                <!--</Collapse>-->
            </div>
            <!--<p class="admin-item">-->
            <!--<span class="name">血管分割</span>-->
            <!--<span class="status">-->
            <!--<i-switch v-model="switch1" @on-change="onOffSwitch"></i-switch>-->
            <!--<Button>修改</Button>-->
            <!--<Button>删除</Button>-->
            <!--<Button>测试</Button>-->
            <!--</span>-->
            <!--</p>-->
        </div>
        <Modal v-model="modal1" class-name="algorithm-admin" width="400">
            <div>
                <p><span class="name">全称</span><span class="input"><input type="text"
                                                                          v-model="algorithmInfo.nick"></span>
                </p>
                <p><span class="name">算法缩写</span><span class="input"><input type="text"
                                                                            v-model="algorithmInfo.name"></span>
                </p>
                <p><span class="name">GPU_CPU</span><span class="input"><input type="text"
                                                                               v-model="algorithmInfo.gpu_cpu"></span>
                </p>
                <p><span class="name">算法输出</span><span class="input"><input type="text"
                                                                            v-model="algorithmInfo.output_args"></span>
                </p>
                <p><span class="name">是否输出图片</span><span class="input"><input type="text"
                                                                              v-model="algorithmInfo.output_img"></span>
                </p>
                <p>
                    <span class="name">编程语言</span>
                    <!--<span class="input"><input type="text" v-model="language"></span>-->
                    <Select v-model="algorithmInfo.language" style="width: 200px;">
                        <Option v-for="item in languageList" :value="item.value" :key="item.value">{{item.label}}
                        </Option>
                    </Select>
                </p>
                <!--<Upload action="http://localhost:3001/uploadAlgorithm" style="text-align: center"-->
                        <!--:on-success="uploadSuccess" :on-error="failToUpload" v-if="addModifyAlgorithm==0">-->
                    <!--<Button icon="ios-cloud-upload-outline">上传文件</Button>-->
                <!--</Upload>-->
                <!--<form  v-if="addModifyAlgorithm==0" class="upload-file"><input type="file" multiple @change="onFileChange"></form>-->
                <p style="text-align: center">
                    <button v-if="addModifyAlgorithm==0" class="upload-file">
                        <span>上传文件</span>
                        <form><input type="file" multiple @change="onFileChange"></form>
                    </button>
                </p>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="modal1=false">取消</Button>
                <Button type="primary" size="large" @click="confirm">确定</Button>
            </div>
        </Modal>
        <Modal width="20" v-model="modal2">
            <p style="font-size: 20px;margin: 20px 0;">确定删除该算法？</p>
            <div slot="footer">
                <Button type="text" size="large" @click="modal2=false">取消</Button>
                <Button type="primary" size="large" @click="delAlgorithm">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import axios from 'axios'
    import {BackURL} from "../js/config";

    export default {
        name: "admin",
        data() {
            return {
                switch1: false,
                modal1: false,
                modal2: false,
                value1: 1,
                algorithmInfo: {
                    name: '',
                    nick: '',
                    gpu_cpu: '',
                    output_args: '',
                    output_img: '',
                    language: '',
                    algorithm_order: '',
                    description: ''
                },
                languageList: [
                    {
                        value: 'Python',
                        label: 'Python'
                    },
                    {
                        value: 'Matlab',
                        label: 'Matlab'
                    }
                ],
                algorithmList: [],
                submitOrNot: false,
                uploadFileList: 0,
                addModifyAlgorithm: 0,
                deleteAlgorithm: 0,
                filearr: [],
                formData: ''
            }
        },
        methods: {
            onOffSwitch(obj) {
                console.log(obj.function)
                obj.function = obj.function == 0 ? 1 : 0;
                // this.modifyAlgorithm(obj)
                axios.put(BackURL + 'uploadAlgorithmInfo', {
                    info: obj
                }).then((res) => {
                    console.log(res)
                    console.log('item', item)
                }).catch((err) => {
                    this.getAlgorithmList()
                })
            },
            modifyAlgorithm(item) {
                if (!this.algorithmInfo.name || !this.algorithmInfo.nick || !this.algorithmInfo.gpu_cpu || !this.algorithmInfo.output_args || !this.algorithmInfo.output_img || !this.algorithmInfo.language) {
                    this.$Message.info({
                        content: '请填写完整信息'
                    });
                    this.modal1 = true
                    return
                }
                axios.put(BackURL + 'uploadAlgorithmInfo', {
                    info: item
                }).then((res) => {
                    console.log(res)
                    console.log('item', item)
                }).catch((err) => {
                    this.getAlgorithmList()
                })
            },
            confirm() {
                if (this.addModifyAlgorithm == 0) {
                    if (!this.algorithmInfo.name || !this.algorithmInfo.nick || !this.algorithmInfo.gpu_cpu || !this.algorithmInfo.output_args || !this.algorithmInfo.output_img || !this.algorithmInfo.language) {
                        this.$Message.info({
                            content: '请填写完整信息'
                        });
                        return
                    }
                    // if (this.uploadFileList == 0) {
                    //     this.$Message.info({
                    //         content: '请上传文件'
                    //     });
                    //     return
                    // }
                    if (!this.formData) {
                        this.$Message.info({
                            content: '请上传文件'
                        });
                        return
                    }
                    this.modal1 = false;
                    console.log(this.uploadFileList)
                    console.log('this.formData confirm', this.formData)
                    this.formData.append('alinfo', JSON.stringify(this.algorithmInfo))
                    // axios.post(BackURL + 'uploadAlgorithmInfo', {
                    //     info: this.algorithmInfo
                    // }).then((res) => {
                    //     console.log(res);
                    //     this.getAlgorithmList()
                    // }).catch((err) => {
                    //
                    // })

                    var config = {
                        headers: {
                            // 'Content-Type': 'multipart/form-data',
                            'Content-Type': 'application/x-www-form-urlencoded',
                            "token": window.localStorage.getItem('screeningLogin')
                        }
                    }
                    axios.post(BackURL + 'uploadAlgorithm', this.formData, config).then((res) => {
                        console.log(res.data)
                        this.getAlgorithmList()
                    }).catch((err) => {
                        console.log(err)
                    })
                } else {
                    this.modal1 = false;
                    this.modifyAlgorithm(this.algorithmInfo)
                }
            },
            uploadSuccess(res) {
                console.log('uploadSuccess', res);
                this.algorithmInfo.algorithm_order = res.msg;
                this.submitOrNot = true;
                this.uploadFileList++
            },
            failToUpload() {

            },
            add() {
                this.modal1 = true;
                this.addModifyAlgorithm = 0;
                this.algorithmInfo = {}
            },
            modify(obj) {
                console.log(obj)
                this.modal1 = true;
                this.addModifyAlgorithm = 1;
                this.algorithmInfo = obj;
            },
            del(num) {
                this.modal2 = true;
                this.deleteAlgorithm = num;
            },
            delAlgorithm() {
                console.log('this.deleteAlgorithm', this.deleteAlgorithm)
                axios.delete(BackURL + 'uploadAlgorithmInfo', {
                    data: {id: this.deleteAlgorithm}
                }).then((res) => {
                    this.modal2 = false
                    this.getAlgorithmList()
                }).catch((err) => {

                })
            },
            getAlgorithmList() {
                axios.get(BackURL + 'uploadAlgorithmInfo').then((res) => {
                    console.log('algorithmList', res)
                    this.algorithmList = res.data.data
                }).catch((err) => {

                })
            },
            onFileChange(e) {
                console.log('onFileChange', this.formData)
                this.filearr = [];
                var files = e.target.files;
                console.log('files', files)
                for (var i = 0; i < files.length; i++) {
                    this.filearr.push(files[i]);
                }
                this.formData = new FormData();
                for (var i = 0; i < this.filearr.length; i++) {
                    this.formData.append("file", this.filearr[i]);
                }
                console.log('this.formData', this.formData.getAll('file'));

                // var config = {
                //     headers: {
                //         // 'Content-Type': 'multipart/form-data',
                //         'Content-Type': 'application/x-www-form-urlencoded',
                //         "token": window.localStorage.getItem('screeningLogin')
                //     }
                // }
                //
                // axios.post(BackURL + 'uploadAlgorithm', this.formData, config).then((res) => {
                //     // this.addList(res.data)
                //     console.log(res.data)
                //     // if (Array.isArray(res.data)) {
                //     //     var data = res.data.sort(this.compare)
                //     //     this.addList(data);
                //     // } else {
                //     //     this.addList(res.data);
                //     // }
                //     // console.log(data)
                // }).catch((err) => {
                //     console.log(err)
                // })
            }
        },
        created() {
            this.getAlgorithmList()
        }
    }
</script>

<style scoped lang="scss">
    .admin-page {
        position: absolute;
        top: 125px;
        width: 100%;
        margin-top: 50px;
        .admin-content {
            margin: 0 20%;
            .admin-header {
                font-size: 20px;
                display: flex;
                justify-content: space-around;
                .name {
                    flex: 1;
                    text-align: center;
                }
                .status {
                    flex: 3;
                    text-align: right;
                    margin-right: 100px;
                }
            }
            .admin-item {
                display: flex;
                justify-content: space-around;
                padding: 10px 0;
                border-bottom: 1px solid #d0d0d0;
                .name {
                    font-size: 18px;
                    flex: 1;
                    text-align: center;
                    height: 45px;
                    line-height: 45px;
                }
                .status {
                    flex: 3;
                    text-align: right;
                    button {
                        font-size: 18px;
                    }
                }
            }
        }
    }
</style>